import { CheckCircleFilled, CloseCircleFilled, ExclamationCircleFilled } from '@ant-design/icons';
import { Table, type ColumnProps } from '../../../functionalComponent';
import { cssVar, Layout, iup, useRefs } from '../../../util';

const columns: ColumnProps[] = [
  {
    dataIndex: 'retFlag',
    title: '校验结果',
    width: 100,
    render: ({ value }) => (
      <span>
        {value === 'forbid' && (
          <span>
            <CloseCircleFilled style={{ color: 'red' }} /> 不通过
          </span>
        )}
        {value === 'prompt' && (
          <span>
            <ExclamationCircleFilled style={{ color: 'orange' }} /> 有风险通过
          </span>
        )}
        {value === 'ignore' && (
          <span>
            <CheckCircleFilled style={{ color: 'green' }} /> 通过
          </span>
        )}
      </span>
    )
  },
  { dataIndex: 'ruleName', title: '业务规则名称', width: 150 },
  { dataIndex: 'ruleContent', title: '触发规则', tooltip: true, flex: 1 },
  {
    dataIndex: 'retTip',
    title: '提示信息',
    tooltip: 'render',
    flex: 1,
    render: ({ value, row }) => {
      if (row.retFlag === 'forbid') {
        const relateBusinessContent = row?.retExtUrls?.map((item, index) => {
          return (
            <a
              key={index}
              style={{ marginRight: 10 }}
              onClick={() => {
                iup.open(item.url);
              }}
            >
              {item.name} {index < row.retExtUrls.length - 1 && ';'}
            </a>
          );
        });

        return (
          <div>
            {value} <br />
            {relateBusinessContent}
          </div>
        );
      } else if (row.retFlag === 'prompt') {
        return value;
      } else {
        return;
      }
    }
  }
];

export function ShowCheckRuleInfo({ dataSource }) {
  const [getRef] = useRefs();
  return (
    <Layout direction="column" autoFit style={{ padding: 5 }}>
      <Layout.Flex style={{ border: cssVar.border, borderRadius: 4 }}>
        <Table columns={columns} ref={getRef('table')} dataSource={dataSource} rowHeight={50} />
      </Layout.Flex>
    </Layout>
  );
}
